<template>
  <div class="blog">
    <h1 class="blog-title">Blog</h1>
    <div class="blog-posts">
      <div class="blog-post" v-for="(post, index) in posts" :key="index">
        <img v-if="post.image" class="blog-post-image" :src="post.image" alt="Blog Post" />
        <div class="blog-post-meta">
          <div class="blog-post-date">{{ post.date }}</div>
          <h2 class="blog-post-title">{{ post.title }}</h2>
          <div class="blog-post-author">
            Category: <span class="category">{{ post.category }}</span> | 
            Author: <span class="author">{{ post.author }}</span> | 
            Comments: <span class="comments">{{ post.comments }}</span>
          </div>
        </div>
        <p class="blog-post-description">{{ post.description }}</p>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';

const posts = ref([
  {
    title: '10 best surfboards in 2020',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
    image: 'https://via.placeholder.com/640x480.png?text=Blog+Post',
    date: 'October 20, 2020',
    category: 'Surfing',
    author: 'Lorelei',
    comments: 0,
  },
  // 新增四个博客条目示例
  {
    title: 'Best surfspots in winter',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
    image: 'https://via.placeholder.com/640x480.png?text=Blog+Post',
    date: 'October 20, 2020',
    category: 'Surfing',
    author: 'Lorelei',
    comments: 0,
  },
  {
    title: 'Best coffee in cenggu',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
    image: 'https://via.placeholder.com/640x480.png?text=Blog+Post',
    date: 'October 20, 2020',
    category: 'Surfing',
    author: 'Lorelei',
    comments: 0,
  },
  {
    title: 'How to get up on that board',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
    image: 'https://via.placeholder.com/640x480.png?text=Blog+Post',
    date: 'October 20, 2020',
    category: 'Surfing',
    author: 'Lorelei',
    comments: 0,
  },
  {
    title: 'Best hikes in cenggu area',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
    image: 'https://via.placeholder.com/640x480.png?text=Blog+Post',
    date: 'October 20, 2020',
    category: 'Surfing',
    author: 'Lorelei',
    comments: 0,
  },
  {
    title: 'Best hikes in cenggu area',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
    image: 'https://via.placeholder.com/640x480.png?text=Blog+Post',
    date: 'October 20, 2020',
    category: 'Surfing',
    author: 'Lorelei',
    comments: 0,
  },
]);
</script>
<style scoped>
  :root {
  --text-color: #333;
  --primary-color: #007bff;
}

.blog {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.blog-title {
  color: var(--text-color);
  text-align: center;
  margin-bottom: 3rem;
  margin-top: 6vh;
}

.blog-posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.blog-post {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: box-shadow 0.3s ease-in-out;
}

.blog-post:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.blog-post-image {
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: cover;
}

.blog-post-meta {
  padding: 1rem;
  text-align: center;
}

.blog-post-date,
.blog-post-author,
.blog-post-description {
  margin: 0.5rem 0;
}

.blog-post-title {
  color: var(--primary-color);
  margin: 1rem 0;
}

.category,
.author,
.comments {
  display: inline-block;
  margin: 0 0.5rem;
}

@media (max-width: 768px) {
  .blog-posts {
    grid-template-columns: 1fr;
  }

  .blog-post {
    max-width: unset;
  }
}
  </style>